<template>
  <div class="product-info-container">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>

    <!-- 商品轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <afswipe :swpImgList="this.prodSwipeImgList" :isFull="false"></afswipe>
        </div>
      </div>
    </div>

    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{prodInfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="prod-price">
            市场价：
            <del>￥{{prodInfo.market_price}}</del>&nbsp;&nbsp;销售价：
            <span class="current-price">￥{{prodInfo.sell_price}}</span>
          </p>
          <p>
            购买数量：
            <p-num-selector :stockNum="prodInfo.stock_quantity" @callNumbox="recvNumbox"></p-num-selector>
          </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addCart">加入购物车</mt-button>
          </p>
        </div>
      </div>
      <div class="mui-card-footer">页脚</div>
    </div>

    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{prodInfo.goods_no}}</p>
          <p>商品货号：{{prodInfo.stock_quantity}}</p>
          <p>商品货号：{{prodInfo.add_time | dateFormat}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" @click="showProdDes(prodID)">图文介绍</mt-button>
        <mt-button type="danger" size="large" @click="showProdCmt(prodID)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import afswipe from "../subcomps/AFSwipe.vue";
import pnumselector from "../subcomps/ProNumSelector.vue";

export default {
  data() {
    return {
      prodSwipeImgList: [], //当前产品的轮播图数组
      prodID: this.$route.params.id,
      prodInfo: {},
      prodQty: 1,
      ballFlag: false
    };
  },

  created() {
    this.getProdSwipeImgListById();
    this.getProdInfo();
  },

  components: {
    afswipe,
    "p-num-selector": pnumselector
  },

  methods: {
    // 获取当前产品的轮播图列表
    getProdSwipeImgListById() {
      this.$http.get("api/getthumimages/" + this.prodID).then(res => {
        // 调整图片的数组对象，添加img属性，使之满足mint组件的要求。
        if (res.body.status == 0) {
          res.body.message.forEach(item => {
            item.img = item.src;
          });
          this.prodSwipeImgList = res.body.message;
        } else {
          Toast("Loading error...");
        }
      });
    },

    // 获取当前产品的详细信息
    getProdInfo() {
      this.$http.get("api/goods/getinfo/" + this.prodID).then(res => {
        // 设置vue-preview的数据数组，但是版本比较老，排版的效果有待于更新
        if (res.body.status == 0) {
          this.prodInfo = res.body.message[0];
        } else {
          Toast("Loading error...");
        }
      });
    },

    // 通过传送产品id的方式，跳转到产品描述页面。我发现参数里面其实一直有id，经思考，应该是历史访问中已经挂载了id值，也就是说无需再新增param，当然这里
    // 参照老师的写法，可以把原先的id值覆盖
    showProdDes(id) {
      this.$router.push({ name: "prodcutDes", params: { id } });
    },

    // 跳转到产品评论界面
    showProdCmt(id) {
      this.$router.push({ name: "prodcutComment", params: { id } });
    },

    // 接受子组件产品数量选择器 实时触发的数量，通过父子组件调用的方式
    recvNumbox(numboxVal) {
      // console.log(numboxVal + "received");
      this.prodQty = numboxVal;
    },

    // 添加到购物车，同时更新store中对应的数据，并更新本地缓存
    addCart() {
      this.ballFlag = !this.ballFlag;

      let addItem = {
        //添加到购物车的产品，建立购物车对象并添加到store中
        prodId: this.prodID,
        prodTitle: this.prodInfo.title,
        prodPrice: this.prodInfo.sell_price,
        prodQty: parseInt(this.prodQty),
        prodFlag: true
      };
      
      this.$store.commit("addShoppingCart", addItem);

    },

    //动画处理的开始，有时间再细看
    beforeEnter(el) {
      el.style.transform = "translate(0,0)";
    },

    enter(el, done) {
      el.offersetWidth;

      const ballPosition = this.$refs.ball.getBoundingClientRect();
      const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();

      const xDist = badgePosition.left - ballPosition.left;
      const yDist = badgePosition.top - ballPosition.top;

      el.style.transform = `translate(${xDist}px,${yDist}px)`;
      el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
      done();
    },

    afterEnter(el) {
      this.ballFlag = !this.ballFlag;
    }
    //动画处理的结束，有时间再细看
  }
};
</script>

<style lang="scss" scoped>
.product-info-container {
  background-color: #eee;
  overflow: hidden;

  .current-price {
    color: #f00;
    font-size: 16px;
    font-weight: bold;
  }
  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
  }
}
</style>